<template>
  <el-row class="nav">
    <el-col :span="24">
      <el-menu
        class="elmenu"
        :collapse="!IsShowTitle"
        :default-active="$route.path"
        @select="handleSelect"
        @open="handleOpen"
        @close="handleClose"
        router
        unique-opened
      >
        <div v-for="meun in MenuTree">
          <div v-if="meun.children.length > 0">
            <el-submenu :key="meun.url" :index="meun.url">
              <template slot="title">
                <i :class="meun.ico"></i>
                <!-- <span slot="title">{{ meun.name }}</span> -->
                <span v-show="IsShowTitle">{{ meun.name }}</span>
              </template>
              <el-menu-item
                :key="item.url"
                :index="item.url"
                v-for="item in meun.children"
              >
                <span style="padding-left: 10px">
                  {{ item.name }}
                </span>
              </el-menu-item>
            </el-submenu>
          </div>
          <div v-else>
            <el-menu-item :key="meun.url" :index="meun.url">
              <i :class="meun.ico"></i>
              <span slot="title">{{ meun.name }}</span>
              <!-- <span v-show="IsShowTitle">{{ meun.name }}</span> -->
            </el-menu-item>
          </div>
        </div>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from "vuex";
import { GetMenuTree } from "@/api/sys";
export default {
  name: "",
  data() {
    return {
      MenuTree: [],
    };
  },

  async created() {
    var result = await GetMenuTree();
    this.MenuTree = result.data;
    // this.MenuTree = [
    //   { id: 1, title: "首页", url: "/home", children: [] },
    //   {
    //     id: 2,
    //     title: "系统管理",
    //     url: "/sys",
    //     children: [
    //       { id: 3, title: "菜单管理", url: "/test" },
    //       { id: 4, title: "角色管理", url: "/role" },
    //       { id: 5, title: "用户管理", url: "/user" },
    //     ],
    //   },
    //   { id: 6, title: "定时作业", url: "/task", children: [] },
    // ];

    //初始化Breadcrumb 右边的面包屑
    var Breadcrumb = [];
    this.MenuTree.forEach((item) => {
      Breadcrumb.push({ url: item.url, titleArr: [item.name] });
      if (item.children != null && item.children.length > 0) {
        item.children.forEach((itemChild) => {
          Breadcrumb.push({
            url: itemChild.url,
            titleArr: [item.name, itemChild.name],
          });
        });
      }
    });
    this.$store.commit("SET_Breadcrumb", Breadcrumb);
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // var result = [];
      // var oldList = JSON.parse(JSON.stringify(this.MenuTree));
      // keyPath.forEach(function (element) {
      //   oldList.forEach(function (item) {
      //     if (item.url == element) {
      //       result.push({ url: item.url, title: item.title });
      //       oldList = oldList.concat(item.children);
      //     }
      //   });
      // });
      // this.$store.commit("SET_BreadcrumbList", result);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  computed: {
    ...mapGetters(["IsShowTitle"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.nav {
  // width: 230px;
  height: 100%;
  /* background-color: #545c64; */
  p {
    // pointer-events: none;
    cursor: pointer;
  }
}
.elmenu:not(.el-menu--collapse) {
  width: 230px;
  // min-height: 400px;
}
</style>
